<template>
  <div>
    <el-card shadow="always" class="box-card margin_30">
      <div slot="header">
        <span>
          <el-button type="primary" size="mini" @click="initializeShow= true">初始化菜单</el-button>
          <el-button type="primary" size="mini" @click="addMenuShow= true">新增菜单</el-button>
        </span>
      </div>
      <div>
        <el-table
          :data="permissionsList"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          default-expand-all="false"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column
            prop="title"
            label="菜单名称"

            width="180"
          />
          <el-table-column
            prop=""
            label="图标"

            width="100"
          >
            <template v-slot="scope">
              <i :class="scope.row.icon" />
            </template>
          </el-table-column>
          <el-table-column
            prop="level"
            label="等级"
          />
          <el-table-column
            prop="sort"
            label="排序"

            width="100"
          />
          <el-table-column
            prop="permissionValue"
            label="权限标识"

            width="180"
          />
          <el-table-column
            prop="path"
            label="路由"
          />
          <el-table-column
            prop="component"
            label="组件路径"

            width="180"
          />
          <el-table-column
            prop="status"
            label="是否可用"

            width="100"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
          />
        </el-table>

      </div>
    </el-card>
    <el-dialog
      title="初始化的菜单列表"
      :visible.sync="initializeShow"
      width="40%"
    >
      <el-alert
        title="请谨慎操作! 初始化菜单会覆盖之前记录!"
        type="warning"
        class="margin_bottom30"
      />
      <el-tree
        ref="tree"
        :data="permissionsList"
        node-key="id"
        :props="props"
      />
      <span slot="footer">
        <el-button @click=" initializeShow= false">取消</el-button>
        <el-button type="primary" @click="saveInit">保存</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="编辑菜单"
      :visible.sync="addMenuShow"
      width="50%"
    >

      <el-form :model="permissionInfo" :inline="true" size="mini" label-width="120px">
        <el-form-item label="菜单类型">
          <el-radio v-model="radio" label="1">顶级目录</el-radio>
          <el-radio v-model="radio" label="2">菜单</el-radio>
          <el-radio v-model="radio" label="3">按钮</el-radio>
        </el-form-item>
        <div v-if="this.radio == 1">
          <el-row>
            <el-col :span="24" :offset="0">
              <el-form-item label="路由名称">
                <el-input v-model="permissionInfo.name" placeholder="前端路由name,唯一" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" :offset="0">
              <el-form-item label="路径">
                <el-input v-model="permissionInfo.path" placeholder="前端路由path,忽略父节点路径" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" :offset="0">
              <el-form-item label="组件路径">
                <el-input v-model="permissionInfo.component " placeholder="前端路由组件路径,比如@/views/foo/foo.vue" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" :offset="0">
              <el-form-item label="重定向">
                <el-input v-model="permissionInfo.redirect" placeholder="redirect属性" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" :offset="0">
              <el-form-item label="排序">
                <el-input-number v-model="permissionInfo.sort" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="0">
              <el-form-item label="是否隐藏">
                <el-radio v-model="isHide" label="0">否</el-radio>
                <el-radio v-model="isHide" label="1">是</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="是否展开">
                <el-radio v-model="isOpen" label="0">否</el-radio>
                <el-radio v-model="isOpen" label="1">是</el-radio>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="meta属性">
            <div v-for="(item, index) in metaList" :key="index">
              <el-row>
                <el-col :span="8" :offset="0">
                  <el-input v-model="item.key" size="mini" :placeholder="item.placeholder1" />
                </el-col>
                <el-col :span="8" :offset="0">
                  <el-input v-model="item.value" size="mini" :placeholder="item.placeholder2" />
                </el-col>
                <el-col :span="8" :offset="0">
                  <el-button @click="addMetaList">+</el-button>
                  <el-button v-if="index!=0 && index!=1" @click="delMetaList(index)">-</el-button>
                </el-col>
              </el-row>

            </div>
          </el-form-item>

        </div>
        <div v-else-if="this.radio == 2">
          <el-row>
            <el-col :span="24" :offset="0">
              <el-form-item label="上级菜单">
                <el-cascader
                  :options="permissionsList"
                  :props="props"
                  clearable
                  @change="getPid"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" :offset="0">
              <el-form-item label="路由名称">
                <el-input v-model="permissionInfo.name" placeholder="前端路由name,唯一" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" :offset="0">
              <el-form-item label="路径">
                <el-input v-model="permissionInfo.path" placeholder="前端路由path,忽略父节点路径" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" :offset="0">
              <el-form-item label="组件路径">
                <el-input v-model="permissionInfo.component " placeholder="前端路由组件路径,比如@/views/foo/foo.vue" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" :offset="0">
              <el-form-item label="重定向">
                <el-input v-model="permissionInfo.redirect" placeholder="redirect属性" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" :offset="0">
              <el-form-item label="排序">
                <el-input-number v-model="permissionInfo.sort" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="0">
              <el-form-item label="是否隐藏">
                <el-radio v-model="isHide" label="0">否</el-radio>
                <el-radio v-model="isHide" label="1">是</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="是否展开">
                <el-radio v-model="isOpen" label="0">否</el-radio>
                <el-radio v-model="isOpen" label="1">是</el-radio>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="meta属性">
            <div v-for="(item, index) in metaList" :key="index">
              <el-row>
                <el-col :span="8" :offset="0">
                  <el-input v-model="item.key" size="mini" :placeholder="item.placeholder1" />
                </el-col>
                <el-col :span="8" :offset="0">
                  <el-input v-model="item.value" size="mini" :placeholder="item.placeholder2" />
                </el-col>
                <el-col :span="8" :offset="0">
                  <el-button @click="addMetaList">+</el-button>
                  <el-button @click="delMetaList(index)">-</el-button>
                </el-col>
              </el-row>

            </div>
          </el-form-item>
        </div>
        <div v-else>
          <el-row>
            <el-col :span="24" :offset="0">
              <el-form-item label="所在页面" prop="pid">
                <el-cascader
                  :options="permissionsList"
                  :props="props"
                  clearable
                  @change="getPid1"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" :offset="0">
              <el-form-item label="按钮名称">
                <el-input v-model="permissionInfo.title" placeholder="按钮名称,比如:新增" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="0">
              <el-form-item label="排序">
                <el-input-number v-model="permissionInfo.sort" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="层级">
                <el-input-number v-model="permissionInfo.level" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="0">
              <el-form-item label="权限标识">
                <el-input
                  v-model="permissionInfo.permissionValue"
                  type="textarea"
                  :rows="2"
                  placeholder="按钮权限标识,比如:productList.list"
                />
              </el-form-item>
            </el-col>

          </el-row>

        </div>

      </el-form>

      <span slot="footer">
        <el-button @click=" addMenuShow = false">取消</el-button>
        <el-button type="primary" @click="addMenu">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { findAllPermissions } from '@/api/rightsManage/role/index'
import { saveInitMenus, save } from '@/api/rightsManage/resource/index'
export default {
  data() {
    return {
      permissionsList: [],
      radio: '1',
      isHide: '1',
      isOpen: '1',
      permissionInfo: {
        'alwaysShow': false,
        'children': [

        ],
        'component': '',
        'createTime': '',
        'hidden': false,
        'icon': '',
        'id': '',
        'isDeleted': false,
        'isSelect': false,
        'level': 0,
        'meta': '',
        'modifyTime': '',
        'name': '',
        'path': '',
        'permissionValue': '',
        'pid': 0,
        'redirect': '',
        'sort': 0,
        'status': 0,
        'title': '',
        'type': 0
      },
      metaList: [
        {
          key: 'title',
          value: '未命名',
          placeholder1: 'meta的key',
          placeholder2: '比如商品管理'

        },
        {
          key: 'icon',
          value: 'el-icon-menu',
          placeholder1: 'meta的key',
          placeholder2: '比如el-icon-menu'
        }
      ],
      initializeShow: false,
      addMenuShow: false,
      props: {
        label: 'title',
        children: 'children',
        checkStrictly: true,
        value: 'id'
      }
    }
  },

  mounted() {

  },

  created() {
    this.init()
  },

  methods: {
    addMenu() {
      var obj = {}
      this.metaList.forEach(ele => {
        obj[ele.key] = ele.value
      })
      if (this.radio != 3) {
        this.permissionInfo.title = this.metaList[0].value
        this.permissionInfo.icon = this.metaList[1].value
      } else {
        delete this.permissionInfo.name
      }

      console.log(JSON.stringify(obj))
      this.permissionInfo.meta = JSON.stringify(obj)

      save(this.permissionInfo).then(res => {
        console.log(res)
        this.init()
      })
    },
    getPid(e) {
      this.permissionInfo.pid = e[0]
    },
    getPid1(e) {
      this.permissionInfo.pid = e[1]
    },
    filterId(arr) {
      arr.forEach(ele => {
        if (ele.type == 2) {
          ele.disabled = true
          delete ele.children
        }
        if (ele.children && ele.children.length) {
          this.filterId(ele.children)
        }
      })
    },
    delMetaList(index) {
      this.metaList.splice(index, 1)
    },
    addchildrenMetaList() {
      this.childrenMetaList.push({
        key: '',
        value: '',
        placeholder1: '比如:title',
        placeholder2: '比如:商品管理'

      })
    },
    addMetaList() {
      this.metaList.push({
        key: '',
        value: '',
        placeholder1: 'meta的key',
        placeholder2: ''

      })
    },
    saveInit() {
      saveInitMenus()
    },
    init() {
      findAllPermissions().then(res => {
        console.log(res)
        this.filterId(res.data.menus)
        this.permissionsList = res.data.menus
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .margin_bottom30{
    margin-bottom: 30px;
  }
</style>
